<template>
  <div class="colorContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="colorMain">
      <el-card style="background: black;">
        <el-form ref="formRef">
          <el-form-item>
            <el-button type="danger" style="background-color: #a25c60;color: #fbefb8;border: 1px solid #fbefb8;">在此选择颜色 🫱</el-button>&nbsp;&nbsp;
            <el-color-picker v-model="colorValue" @change="handleChangeColor" style="width: 300px;"></el-color-picker>
            <el-tooltip class="box-item" effect="light" content="在此区域手动录入" placement="bottom"
              :disabled="putColorValue.length > 0">
              <el-input
                v-model="putColorValue"
                placeholder="手动输入"
                maxlength="20"
                style="width: 150px;margin-left: 10px;"
              ></el-input>
            </el-tooltip>
            <el-button
              @click="putColor"
              style="margin-left: 10px;width: 80px;height: 40px;border-radius: 6px;"
              type="info"
              v-if="putColorValue && putColorValue.length"
            >
              确认
            </el-button>
          </el-form-item>
          <el-form-item label="选中的颜色：" prop="colorValue" label-width="100px">
            <el-tooltip class="box-item" effect="light" :content="`选中的颜色为: ${colorValue}`" placement="bottom"
              :disabled="!colorValue">
              <el-input
                v-model="colorValue"
                placeholder="请选择颜色"
                maxlength="20"
                disabled
              ></el-input>
            </el-tooltip>
            <el-button @click="clearColorValue" class="colorBtn" type="danger">清空</el-button>
            <el-button @click="copyColorValue" class="colorBtn" type="info">复制</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button @click="rgbColorValue" class="colorBtn" type="warning">转换RGB</el-button>
            <el-button @click="hexColorValue" class="colorBtn" type="warning">转换HEX</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import clipboard3 from 'vue-clipboard3'
import { hex2Rgb, rgb2Hex } from '@/utils/plugins'

const formRef = ref<FormInstance>()
const route = useRoute()
const router = useRouter()
const { toClipboard } = clipboard3()

const colorValue = ref<any>('#891C1C')
const putColorValue = ref<any>('')

const clearColorValue = () => {
  colorValue.value = ''
}

const putColor = () => {
  colorValue.value = putColorValue.value
  putColorValue.value = ''
}

const handleChangeColor = (color: string) => {
  colorValue.value = color
}

const rgbColorValue = () => {
  if (colorValue.value.indexOf(',') != -1) {
    ElMessage.warning('请用HEX数值进行转换')
    return
  } else {
    colorValue.value = hex2Rgb(colorValue.value)
  }
}

const hexColorValue = () => {
  if (colorValue.value.indexOf('#') != -1) {
    ElMessage.warning('请用RGB数值进行转换')
    return
  } else {
    colorValue.value = colorValue.value.split(',')
    const r = colorValue.value[0];
    const g = colorValue.value[1];
    const b = colorValue.value[2];
    colorValue.value = rgb2Hex(r, g, b)
  }
}

const copyColorValue = async () => {
  try {
    await toClipboard(colorValue.value)
    ElMessage({
      type: 'success',
      showClose: true,
      message: '复制成功'
    })
  } catch (error) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '复制失败'
    })
  }
}

onMounted(() => {
  
})

</script>

<style lang="scss" scoped>
.colorContent {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .colorMain {
    padding: 30px;
    .el-card {
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
    }
    margin: 50px 25px;
    :deep(.el-form-item__content) {
      margin-bottom: 25px;
    }
    :deep(.el-color-picker__trigger) {
      width: 250px;
      height: 50px;
      border-radius: 16px;
    }
    :deep(.el-color-picker__color) {
      border-radius: 12px;
    }
    :deep(.el-color-picker__color-inner) {
      border-radius: 12px;
    }
    .el-input,
    .el-select {
      width: 300px;
      height: 40px;
    }
    .colorBtn {
      margin-left: 15px;
      width: 100px;
      height: 40px;
      border-radius: 6px;
    }

  }

}
</style>